<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物资管理</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f4f4f4;
        }

        .header {
            background: #333;
            color: #fff;
            padding: 10px 20px;
            text-align: center;
            font-size: 24px;
        }

        table {
            width: 95%;
            margin: 20px auto;
            border-collapse: collapse;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        th, td {
            border: 1px solid #ddd;
            padding: 15px;
            text-align: left;
        }

        th {
            background-color: #6E6E6E; /* 更改为灰色 */
            color: white;
        }

        tbody tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        .quantity-input {
            width: 80px;
            padding: 5px;
            text-align: center;
        }

        .submit-button {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 10px 20px;
            cursor: pointer;
            background-color: #6E6E6E; /* 更改为灰色 */
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="header">
        物资列表
    </div>
    <table id="material-table">
        <thead>
            <tr>
                <th>物资ID</th>
                <th>物资名称</th>
                <th>分类</th>
                <th>仓库</th>
                <th>数量</th>
            </tr>
        </thead>
        <tbody>
            <!-- 物资数据将通过JavaScript动态插入 -->
        </tbody>
    </table>

    <button class="submit-button" onclick="submitChanges()">提交更改</button>

    <script>
        // 模拟的物资数据
        const materialData = [
            {
                "materialId": 1,
                "material_name": "医疗箱",
                "material_category": "医疗",
                "warehouse_name": "北京",
                "materialQuantity": 7997
            },
            // ... 其他物资对象
        ];

        document.addEventListener('DOMContentLoaded', function() {
            const tbody = document.getElementById('material-table').getElementsByTagName('tbody')[0];
            materialData.forEach(item => {
                const tr = document.createElement('tr');
                tr.innerHTML = `
                    <td>${item.materialId}</td>
                    <td>${item.material_name}</td>
                    <td>${item.material_category}</td>
                    <td>${item.warehouse_name}</td>
                    <td><input type="number" class="quantity-input" data-material-id="${item.materialId}" value="${item.materialQuantity}" onchange="updateQuantity(${item.materialId}, this.value)"></td>
                `;
                tbody.appendChild(tr);
            });
        });

        function updateQuantity(materialId, quantity) {
            console.log(`物资ID ${materialId} 的数量更新为 ${quantity}`);
            // 这里可以添加更新数量的逻辑，例如发送请求到服务器等
        }

        function submitChanges() {
            var inputs = document.querySelectorAll('.quantity-input');
            var materialUpdates = []; // 用于存储更新信息
            inputs.forEach(input => {
                var materialId = input.dataset.materialId;
                var quantity = input.value;
                materialUpdates.push({materialId, quantity});
                updateQuantity(materialId, quantity);
            });
            alert('更改已提交！');
            // 这里可以添加提交更改后的逻辑，例如发送数据到服务器等
        }
    </script>
</body>
</html>